<div class="signin-content">
    <h1>Forgot Password</h1>

    <mat-card>
      <mat-progress-bar mode='indeterminate' *ngIf='loading'></mat-progress-bar>
      <mat-card-content>
        <form [formGroup]="forgotPasswordForm" (ngSubmit)="onSubmit()" *ngIf="!resetPasswordRequested">
          <p>Please enter the email address of your account</p>
          <mat-form-field class="full-width-input">
            <input matInput placeholder="Email" formControlName="email" required>
            <mat-error *ngIf="isFieldInvalid('email', 'required')">
              Please inform your email
            </mat-error>
            <mat-error *ngIf="isFieldInvalid('email', 'email')">
              Please enter valid email address
            </mat-error>
          </mat-form-field>
          <button mat-raised-button type="button" [disabled]="loading" routerLink="/login">Back</button>
          <button mat-raised-button color="primary" [disabled]="loading">Submit</button>
        </form>

        <div *ngIf="resetPasswordRequested">
          <p>You reset password request has been submitted. Please check your email for further instructions.</p>
          <button mat-raised-button routerLink="/login">Back to Login Page</button>
        </div>

      </mat-card-content>
    </mat-card>
  </div>
